﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="pagescroll"></script>
    <script src="../scripts/common.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 20px;
        }

        td.jsonChild1 {
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <a class="rayui-btn btn-primary" href="/example/pagescrolldemo.html" target="_blank">demo例子</a>
    <h3 class="spliter-middle"><label>html</label></h3>
    <pre class="rayui-code code-1" data-options='{ "title": "html标签"}'>
    &lt;div id="pagescroll"><rs style="color: #f00">       //滚动容器，必须含有，其中id可以自定义，当然也可以用class</rs>
        &lt;div id="datapanel"><rs style="color: #f00">    //数据容器，必须含有</rs>
        &lt;/div>
    &lt;/div>
</pre>


    <h3 class="spliter-middle"><label>初始化函数</label></h3>
    <table class="raytable full-width">
        <thead>
            <tr>
                <th style="min-width:150px">参数</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    render
                </td>
                <td>
                    var ins = pagescroll.render("#pagescroll", options);//options参数如下
                </td>
            </tr>
        </tbody>
    </table>


    <h3 class="spliter-middle"><label>options参数</label></h3>
    <table class="raytable full-width">
        <thead>
            <tr>
                <th style="min-width:150px">参数</th>
                <th style="min-width:100px">类型</th>
                <th>说明</th>
                <th>默认值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    noMoreCount
                </td>
                <td>number</td>
                <td>只有当总数据条数小于noMoreCount时才会显示没有数据的提示</td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    noMoreDataTip
                </td>
                <td>string</td>
                <td>没有数据时的提示语</td>
                <td>
                    --没有更多数据了--
                </td>
            </tr>
            <tr>
                <td>
                    page
                </td>
                <td>json</td>
                <td>分页信息</td>
                <td>
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    cur
                </td>
                <td>number</td>
                <td>当前页面，默认从1开始，使用下拉刷新时cur会重置为1，在使用上拉加载更多时，回调函数得到的值是2，每次回调前都会+1</td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    limit
                </td>
                <td>number</td>
                <td>每页条数，默认10</td>
                <td>
                    10
                </td>
            </tr>

            <!-- down参数 -->
            <tr>
                <td>
                    down
                </td>
                <td>json</td>
                <td>下拉参数</td>
                <td>
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    use
                </td>
                <td>boolean</td>
                <td>是否开启，默认true开启</td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    first
                </td>
                <td>boolean</td>
                <td>首次是否初始化加载数据，默认true</td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    gap
                </td>
                <td>number</td>
                <td>下拉缺口，下拉100px松开刷新</td>
                <td>
                    100
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    textInGap
                </td>
                <td>string</td>
                <td>下拉距离在gap范围内的提示</td>
                <td>
                    下拉刷新
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    textOutGap
                </td>
                <td>string</td>
                <td>下拉距离大于gap范围的提示</td>
                <td>
                    释放更新
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    textLoading
                </td>
                <td>string</td>
                <td>加载中的提示</td>
                <td>
                    加载中···
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    htmlTip
                </td>
                <td>string</td>
                <td>下拉提示，如果自定义，一定要有pagescroll-down-text样式</td>
                <td>
                    &lt;i class="ra pagescroll-down-icon">&lt;/i>&lt;span class="pagescroll-down-text">&lt;/span>
                </td>
            </tr>


            <!-- up参数 -->
            <tr>
                <td>
                    up
                </td>
                <td>json</td>
                <td>上拉参数</td>
                <td>
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    use
                </td>
                <td>boolean</td>
                <td>是否开启，默认true开启</td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    gap
                </td>
                <td>number</td>
                <td>上拉缺口，距离底部100px时触发回调</td>
                <td>
                    100
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    toTopBtn
                </td>
                <td>boolean</td>
                <td>是否显示回到顶部按钮，默认true，显示</td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    toTopGap
                </td>
                <td>number</td>
                <td>滚动条向下滚动200px高度时才会显示回到顶部按钮</td>
                <td>
                    200
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    toTopDuration
                </td>
                <td>number</td>
                <td>回到顶部时长动画时间，默认300，单位毫秒</td>
                <td>
                    300
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    textLoading
                </td>
                <td>string</td>
                <td> 加载中的提示</td>
                <td>
                    正在加载
                </td>
            </tr>
            <tr>
                <td class="jsonChild1">
                    htmlTip
                </td>
                <td>string</td>
                <td>上拉提示，如果自定义，一定要有pagescroll-up-text样式</td>
                <td>
                    &lt;i class="ra pagescroll-down-icon pagescroll-down-animate">&lt;/i>&lt;span class="pagescroll-up-text">&lt;/span>
                </td>
            </tr>
        </tbody>
    </table>


    <h3 class="spliter-middle"><label>ins对象函数</label></h3>
    <table class="raytable full-width">
        <thead>
            <tr>
                <th style="min-width:150px">参数</th>
                <th>说明</th>
                <th>例如</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    endDown(curLength, totalLength)
                </td>
                <td>
                    下拉刷新回调完的方法内必须要调用此方法结束下拉刷新
                </td>
                <td>
                    ins.endDown(当前页数据数, 数据总数);
                </td>
            </tr>
            <tr>
                <td>
                    endUp(curLength, totalLength)
                </td>
                <td>
                    上拉加载更多回调函数内必须调用此方法结束上拉加载
                </td>
                <td>
                    ins.endUp(当前页数据数, 数据总数);
                </td>
            </tr>
        </tbody>
    </table>


    <h3 class="spliter-middle"><label>使用说明</label></h3>
    <pre class="rayui-code" data-options='{ "title": "js说明"}'>
         rayui.use("pagescroll", function () {<rs style="color: #00f">//加载组件</rs>
            var pagescroll = rayui.pagescroll;
            var ins = pagescroll.render("#pagescroll", {
                <rs style="color: #00f">//下拉刷新参数</rs>
                down: {
                    callback: function () {
                        <rs style="color: #00f">//下拉回调函数，在这里进行ajax请求</rs>
                        ……
                        ins.<rs style="color: #f00">endDown</rs>(curCount, totalCount);<rs style="color: #f00">//数据渲染完后一定执行此方法</rs>
                    }
                },
                <rs style="color: #00f">//上拉加载更多参数</rs>
                up: {
                    toTopBtn:false,
                    callback: function (page) {
                        <rs style="color: #00f">//下拉回调函数，在这里进行ajax请求，此时page参数包含：cur（请求下一页的页码），limit（每页条数）</rs>
                        ……
                         ins.<rs style="color: #f00">endUp</rs>(curCount, totalCount);<rs style="color: #f00">//数据渲染完后一定执行此方法</rs>                        
                    }
                }
            });

        });
    </pre>
    <br/>



    <script>
        rayui.use(["code"], function () {

            var code = rayui.code;

            code.render({ copy: true });
        })

    </script>

</body>
</html>